/* Studio Kipo Style */
body {
	color: #666;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-weight:400;
	font-size: 15px;
	line-height: 1.4em;
	width:100%;
	height:100%;
	background:#fff;
}

/* Title text */
h1, h2, h3, h4, h5 {
	text-transform:uppercase;
	color:#444;
	font-family: 'Comfortaa', cursive;
	font-weight:700;
	line-height:1.2em;
}

h1 {font-size:35px;}
h2 {font-size:30px;}
h3 {font-size:27px;}
h4 {font-size:23px;}
h5 {font-size:21px;}

em {
	font-style:italic;
}

p {
	margin:8px 0;
}

img {
	max-width:100%;
}

#wrap {
	width:100%;
}

#top {
	float:left;
	width:100%;
	height:100px;
	background:#ececec;
}

#top h3 {
	float:left;
	margin-left:22%;
	line-height:95px;
	color:#999;
}

#menu {
	float:right;
	width:40%;
	text-align:center;
	line-height:95px;
}

#menu a,
#menu a:visited {
	float:right;
	width:30%;
	color:#444;
	font-family: 'Comfortaa', cursive;
	font-weight:700;
	text-transform:uppercase;
	font-size:19px;
}
#menu a:hover,
#menu a:active,
#menu a:focus {
	text-decoration:none;
	color:#a6ce39;
}
#menu a.info {
	width:30px;
	height:30px;
	background:url(../images/info-small-icon.png);
	margin:32px;
}

#icons  a#logo {
	background:#a6ce39 url(../images/logo.png) no-repeat center center;
	height:100px;
	margin:0;
	border:none;
	top:0;
}

#icons {
	float:left;
	width:100%;
	height:5px;
}

#icons a {
	width:20%;
	height:200px;
	position:absolute;
	color:#fff;
	overflow:hidden;
	font-size:17px;
	top:-195px;
}

#icons a:hover {
	top:0;
}

#icons a span.txt {
	font-family: 'Comfortaa', cursive;
	font-weight:300;
	text-transform:uppercase;
	position:absolute;
	width:100%;
	top:160px;
	text-align:center;
	z-index:10;
}

#icons a:hover span.txt {
}

#icons a span.pic {
	width:150px;
	height:150px;
	background-position:top;
	background-size:100%;
	display:block;
	margin:10px auto 0;
}

#icons a:hover span.pic {
}

/* print */
#icons a.print {
	background-color:#de6956;
	left:20%;
}
#icons a.print span.pic {
	background-image:url(../images/print-icon-2.png);
}
#icons a.print:hover {
}

/* pvc */
#icons a.pvc {
	background-color:#46c7e3;
	left:40%;
}
#icons a.pvc span.pic {
	background-image:url(../images/pvc-icon-2.png);
}
#icons a.pvc:hover {
}

/* bag 
#icons a.bag {
	background-color:#a6ce39;
}
#icons a.bag span.pic {
	background-image:url(../images/bag-icon-2.png);
}
#icons a.bag:hover {
	border-top-color:#a6ce39;
	border-bottom-color:#a6ce39;
	background-color:#fff;
}
*/
/* shirt */
#icons a.shirt {
	background-color:#f5e043;
	left:60%;
}
#icons a.shirt span.pic {
	background-image:url(../images/shirt-icon-2.png);
}
#icons a.shirt:hover {
}

/* folio */
#icons a.folio {
	background-color:#444444;
	left:80%;
}
#icons a.folio span.pic {
	background-image:url(../images/folio-icon-2.png);
}
#icons a.folio:hover {
}



/* SLIDESHOW */
#slideshow {
	float:left;
	width:100%;
	height:400px;
	background:#d2c2b3;
}

/* CONTENT */
#content {
	float:left;
	width:88%;
	padding:40px 6%;
}

#left {
	float:left;
	width:40%;
}
#right {
	float:right;
	width:55%;
}

#slider {
	position:relative;
	margin:40px 0;
}
#slider,
#sliderimages {
	float:left;
	width:100%;
	height:250px;
}
#sliderimages a {
	float:left;
	width:300px;
	margin:0 20px;
}
#sliderimages a img {
	float:left;
}
#sliderimages a span {
	float:left;
	width:100%;
	text-align:center;
}

#slider a.arrow-left,
#slider a.arrow-right {
	display:block;
	width:108px;
	height:106px;
	position:absolute;
	background-image:url(../images/big-arrows.png);
	top:50%;
	margin-top:-54px;
	z-index:100;
}

#slider a.arrow-left {
	background-position:left;
	left:10px;
}
#slider a.arrow-right {
	background-position:right;
	right:10px;
}

/* PRODUCTS */
#products {
	float:left;
	width:100%;
}
#products a {
	float:left;
	width:29%;
	margin:20px;
}
#products a img {
	float:left;
}
#products a span {
	float:left;
	width:100%;
	text-align:center;
}


/* PRODUCT */
#pathway {
	float:left;
	font-size:23px;
	text-transform:lowercase;
	color:#999;
	font-family: 'Comfortaa', cursive;
	font-weight:300;
	line-height:40px;
}

#pathway a,
#pathway a:visited {
	color:#999;
}

.product h1 {
	float:left;
	line-height:35px;
}

#product-description {
	float:left;
	width:100%;
	margin-top:30px;
}

#images {
	float:left;
	width:100%;
	margin:10px 0;
	text-align:center;
}
img {
	max-width:100%;
}

.button {
	display:inline-block;
	width:100%;
	height:60px;
	background:#a6ce39;
	font-family: 'Comfortaa', cursive;
	font-weight:700;
	text-transform:uppercase;
	font-size:21px;
	text-align:center;
	line-height:60px;
	color:#fff;
}
.button:hover,
.button:active,
.button:focus {
	text-decoration:none;
	background:#444;
}

a.size,
a.details {
	width:75px;
	font-family: 'Comfortaa', cursive;
	font-weight:700;
	text-transform:uppercase;
	font-size:15px;
	text-align:center;
	color:#666;
	text-decoration:none;
	margin:20px 20px 0 0;
	padding-top:75px;
	float:left;
}
a.size {
	background:url(../images/icon-size.png) no-repeat top center;
}
a.details {
	background:url(../images/icon-details.png) no-repeat top center;
}

a.size:hover,
a.details:hover {
	color:#333;
}
/* FOOTER */
#footer {
	width:100%;
	float:left;
	background:#444;
	font-size:13px;
}

#footer a,
#footer a:visited {
	color:#666;
}

.footerbox h5 {
	color:#777;
}

.footerbox {
	float:left;
	width:24%;
	padding:3% 2% 3% 6%;
}

.footerbox span {
	display:block;
	line-height:16px;
	margin:5px 0;
}

span.address {
	padding-left:20px;
	background: url(../images/footer-icons.png) no-repeat left top;
} 
span.phone {
	padding-left:20px;
	background: url(../images/footer-icons.png) no-repeat left -21px;
} 
span.email {
	padding-left:20px;
	background: url(../images/footer-icons.png) no-repeat left -42px;
} 
span.fb {
	padding-left:20px;
	background: url(../images/footer-icons.png) no-repeat left -63px;
} 
span.id {
	padding-left:20px;
	background: url(../images/footer-icons.png) no-repeat left bottom;
} 


@media screen and (max-width: 1200px) {
	
	#icons a {
		font-size:14px;
	}
	
}

@media screen and (max-width: 1000px) {
	
	#icons a {
		font-size:12px;
	}
	
	#icons a span.pic {
		width:100px;
		height:100px;
		margin:100px auto 0;
	}
	#icons a:hover span.pic {
		background-position:bottom;
		margin:90px auto 0;
	}

	
}

@media screen and (max-width: 1000px) {
	
	
	#icons {
		float:left;
		width:100%;
		height:auto;
	}
	
	#icons a {
		float:left;
		width:100%;
		height:100px;
		position:relative;
		color:#fff;
		overflow:hidden;
		font-size:21px;
	}
	#icons a:hover {
		overflow:visible;
		height:100px;
		border-bottom:none;
		border-top:none;
	}
	
	#icons a span.txt {
		width:80%;
		top:40px;
		left:140px;
		text-align:left;
	}
	
	#icons a:hover span.txt {
		top:40px;
		color:#444;
	}
	
	#icons a span.pic {
		width:80px;
		height:80px;
		margin:10px 30px;
	}
	
	#icons a:hover span.pic {
		background-position:bottom;
		margin:10px 30px;
	}
		
	#left {
		width:100%;
	}
	#right {
		width:100%;
		float:left;
		margin-top:40px;
	}
	
	#footer {
		font-size:16px;
	}
	
	.footerbox {
		width:80%;
		padding:6% 2% 0% 6%;
	}
	
	.footerbox span {
		line-height:16px;
		margin:10px 0;
	}

	
}

@media screen and (max-width: 1000px) {
	
	#icons a {
		font-size:15px;
	}
	
	#icons a span.txt {
		left:120px;
	}
	
}